<script setup lang="ts">
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Blockquote from '@tiptap/extension-blockquote'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import BulletList from '@tiptap/extension-bullet-list'
import ListItem from '@tiptap/extension-list-item'
import CodeBlock from '@tiptap/extension-code-block'
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import Heading from '@tiptap/extension-heading'
import HorizontalRule from '@tiptap/extension-horizontal-rule'
import Image from '@tiptap/extension-image'
import OrderedList from '@tiptap/extension-ordered-list'
import TaskItem from '@tiptap/extension-task-item'
import TaskList from '@tiptap/extension-task-list'
import Bold from '@tiptap/extension-bold'
import Code from '@tiptap/extension-code'
import Highlight from '@tiptap/extension-highlight'
import Italic from '@tiptap/extension-italic'
import Link from '@tiptap/extension-link'

import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
// load all highlight.js languages
import { lowlight } from 'lowlight'
import { Strike } from '@tiptap/extension-strike'
import { TextStyle } from '@tiptap/extension-text-style'
import { Underline } from '@tiptap/extension-underline'
import markdownToHtml from '../../utils/markdownToHtml'
import htmlToMarkdown from '../../utils/htmlToMarkdown'
import { watch } from 'vue'

lowlight.registerLanguage('html', html)
lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)
lowlight.registerLanguage('ts', ts)

const props = defineProps({
  filePath: {
    type: String,
    default: ''
  }
})

const loadFile = async (editor) => {
  if (props.filePath) {
    await window.api.fileValueByPath(props.filePath)
    const valueByPath = await window.api.readFile()
    console.log(props.filePath, valueByPath, '====s')
    if (valueByPath.type === 'file') {
      const toHtml = await markdownToHtml(valueByPath.data)
      editor.commands.setContent(toHtml)
    }
  }
}

watch(
  () => props.filePath,
  async () => {
    await loadFile(editor.value!)
  }
)

// const emits = defineEmits(['update:modelValue'])

const editor = useEditor({
  extensions: [
    // 入门套件
    StarterKit,
    // 扩展插件
    Document,
    // 基础插件
    Paragraph,
    // 文本插件
    Text,
    // blockquote 块引用插件
    Blockquote,
    // 列表插件
    BulletList,
    // 有序列表插件
    OrderedList,
    // 列表项插件
    ListItem,
    // 代码块插件
    CodeBlock,
    // 代码高亮
    CodeBlockLowlight.configure({
      lowlight
    }),
    // 标题插件
    BulletList.configure({
      keepMarks: true
    }),
    BulletList.configure({
      keepAttributes: true
    }),
    // 标题插件
    Heading.configure({
      levels: [1, 2, 3, 4, 5, 6]
    }),
    // 分割线插件
    HorizontalRule,
    // 图片插件 cmd + shift + i
    Image.configure({
      allowBase64: true
    }),
    // 任务列表插件 cmd + shift + l
    TaskList,
    TaskItem.configure({
      nested: true
    }),
    // 加粗插件 cmd + b
    Bold,
    // 代码插件 cmd + `
    Code,
    // 强调色高亮插件 cmd + shift + h
    Highlight.configure({
      multicolor: true
    }),
    // 斜体插件 cmd + i
    Italic,
    // 链接插件 cmd + k
    Link.configure({
      openOnClick: true
    }),
    // 删除线插件 cmd + shift + s
    Strike,
    // 字体颜色插件
    TextStyle,
    // 下划线插件 cmd + u
    Underline
  ],
  onCreate: async ({ editor }) => {
    await loadFile(editor)
  },
  onUpdate: () => {
    const value = editor.value?.getHTML()
    if (value) {
      const md = htmlToMarkdown(value)
      window.api.saveFile({ path: props.filePath, content: md })
    }
  }
})
</script>

<template>
  <div class="c-tiptap">
    <editor-content :editor="editor" />
  </div>
</template>

<style scoped lang="scss">
.c-tiptap {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
</style>
